<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绘本采集</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/element-ui/2.3.8/theme-chalk/index.css">
    <script>
        /*resize.js*/
            ! function (a) {
                function b() {
                    var b = g.getBoundingClientRect().width;
                    a.rem = (b / 7.5 > 100 ? 100 : (b / 7.5 < 40 ? 40 : b / 7.5)),
                        g.style.fontSize = a.rem + "px"
                }
                var g = a.document.documentElement,
                    e;
                a.addEventListener("resize", function () {
                    clearTimeout(e), e = setTimeout(b, 300)
                }, !1),
                    a.addEventListener("pageshow", function (a) {
                        a.persisted && (clearTimeout(e), e = setTimeout(b, 300))
                    }, !1), b()
            }(window);
    </script>
    <style lang="sass">
        .search-conts{
            margin:0 auto;
            padding-top:1rem;
            width: 6.5rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            
        }
        .search-conts .tables{
            margin-top:.5rem;
        }
        .submit{
            margin-top:.4rem;
        }
        .submit .el-button{
            /* margin:0 auto; */
            display: block;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="search-conts">
            <div class="clearfix">
                <el-input v-model="search.param" class="w-250"></el-input>
                <el-button @click="getList()">查询</el-button>
            </div>
            <div class="tables clearfix">
                <el-table :data="list" style="width: 100%" height="400">
                    <el-table-column prop="bookName" label="绘本名称"></el-table-column>
                    <el-table-column prop="isbn" label="ISBN"></el-table-column>
                    <el-table-column label="绑定情况">
                        <template slot-scope="scope">
                            <div v-if="scope.row.lockUser">{{scope.row.lockUser}}</div>
                            <el-button v-else @click="bindUserShow(scope.row)">绑定</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <el-dialog title="绑定绘本" :visible.sync="dialog.show" width="80%" :center="true">
            <el-form label-width="80px">
                <el-form-item label="你的姓名">
                    <el-input v-model.trim="dialog.lockUser"></el-input>
                </el-form-item>
                <div class="submit">
                    <el-button type="primary" @click="bindUser()">提交</el-button>
                </div>
            </el-form>
            
            
        </el-dialog>
    </div>
    <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>